<template>
	<div class="app-breadcrumb">
		<a-breadcrumb>
			<a-breadcrumb-item
				v-for="(item, index) in items"
				@click="handleClick(item)"
				>{{ item.meta.caption }}</a-breadcrumb-item
			>
		</a-breadcrumb>
	</div>
</template>

<script lang="ts" setup>
import { IParam } from '@/core';
import { useAppStoreWithOut } from '@/store';
import { useRoute, useRouter } from 'vue-router';
import { breadCrumbProps } from './breadcrumb';
const props = defineProps(breadCrumbProps);
const route = useRoute();
const { push } = useRouter();
const items = ref<IParam[]>([]);
watch(
	() => route.fullPath,
	(newVal) => {
		items.value = route.matched;
	},
	{ immediate: true }
);

// 获取所有TAB项数据
const pageMetas = computed(() => {
	const { getPageMetas } = useAppStoreWithOut();
	return getPageMetas;
});

const handleClick = (item: IParam) => {
	const regex = /\/:(.*?)\?/g;
	push(item.path.replace(regex, ''));
};
</script>
